const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const webpack = require('webpack')
const dotenv = require('dotenv')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const createLintingRule = () => ({
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    enforce: 'pre',
    include: [resolve('src')],
    options: {
      formatter: require('eslint-friendly-formatter'),
    }
  })

/** @type {import('webpack').Configuration} */ 
module.exports = {
    mode:'none',
    entry:'./src/main.js',
    output:{
        path:path.join(__dirname,'dist'),
        filename:'js/bundle.[contenthash:6].js'
    },
    module:{
        rules:[
            ...createLintingRule,
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test:/\.vue$/,
                use:'vue-loader'
            },
            {
                test:/\.(png|jpe?g|gif)$/,
                use:{
                    loader:'url-loader',
                    options:{
                        limit: 5 * 1024,
                        name:'img/[name].[contenthash:6].[ext]',
                        esModule:false
                    }
                }
        
            }
        ]
    }, 
    plugins:[
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template:'./public/index.html',
            title:'Shy Vue'
        }),
        new webpack.DefinePlugin({
            BASE_URL: '"/"'
        })
    ]
} 